Skip to main content

Onboarding Templates

Introduction​

A new web onboarding system has been recently implemented. The JSON files used for the web onboarding are very similar to the ones used in the app. The main differences are the new values added to support the desktop version of the onboarding (e.g. desktopBackgorund for the background images for the desktop).

[!IMPORTANT] You can find the full JSON files for Elixir and Calrify here: onboardings.zip

Live links: https://elixir.thefabulous.co/onboarding/elixir-initial - https://time.thefabulous.co/onboarding/time-initial

[!NOTE] All current onboardings files can be found on Appsmith app here – or here on Airtable.

Rules for Valid JSON files :​

A valid onboarding JSON must have the following:

  • appId (required, e.g. co.thefabulous.app or co.thefab.tm).
  • steps (required - it is an array of all the steps in the onboarding).
  • logic (optional - it includes logic like jump or trackEvent, progress).
  • seo (required - it includes the title, description, and favicon for the app).
  • language (required).
  • logoWithProgressBar (optional – check below which templates support it).

NOTE: Each step in steps must have a stepId.

[!IMPORTANT] Current app ids are:

  • co.thefabulous.app
  • co.thefab.elixir
  • co.thefab.tm
  • co.thefab.shape
  • co.thefab.mind
  • co.thefab.ambiance

[!NOTE] Each of these apps has its own subdomain.

These subdomains are:

Example of the structure of the JSON file

{
    "id": "elixir_app_id",
    "appId": "co.thefab.elixir",
    "steps": [steps goes here],
    "logic": [logic goes here],
    "seo":{
        "title": "Elixir",
        "favicon": "https://c.thefab.co/paged-content-editor/elixir-favicon.png",
        "description": "Unlock your true potential with Elixir: Your daily guide to a purpose-driven, authentic life. Find your focus, live with intention."
    },
    "logoWithProgressBar": {
        "type": "gradient",
        "logoImage": "https://www.thefabulous-staging.co/images/shape-logo.png",
        "logoWidth": "126px",
        "logoWidthMobile": "102px",
        "logoHeight": "40px",
        "logoHeightMobile": "32px",
        "progressBarBackground": "#FFF",
        "progressBarColor": "linear-gradient(270deg, #8CDBDF 15.63%, #251C93 83.85%)"
   }
}

Supported Step Templates​